<template>
  <div class='graph-container' v-loading='loading'
       element-loading-text="图谱加载中"
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(255, 255, 255, 0.8)">
      <D3 ref='d3graph'
          :names='names' :labels='labels' :link-types='linkTypes'
      ></D3>
    </div>
</template>

<script>
import D3 from './components/D3.vue';
import { getNodeRelationGraph } from '@/api/graphData';
import D3SearchBar from '@/page/D3Page/components/D3SearchBar.vue';
import { searchEntityLinks } from '@/api/node';

export default {
  name: 'D3Page',
  components: {
    D3SearchBar,
    D3
  },
  mounted() {
    // 2.判断vuex中是否记录了图的数据
    if (this.$store.state.graphData.node.length === 0) {
      this.getGraphData();
    }
    // 3.事件监听
    this.$bus.$on('change3dGraph', async (node) => {
      this.loading=true
      await getNodeRelationGraph(node.label, node.id).then(response => {
        let data = response.data.data;
        this.graphData.nodes = data.node;
        this.graphData.links = data.relationship;
        this.$store.commit('setGraphDataNode', data.node);
        this.$store.commit('setGraphDataLink', data.relationship);
      });
      this.loading=false
      this.$refs.d3graph.threeInit()
    });
    this.$bus.$on("searchNodeNameAction3D",async (nodeInfo)=>{
      let searchSuccess=false
      this.loading=true
      await searchEntityLinks(nodeInfo.domain,nodeInfo.nodeName,nodeInfo.range).then((response)=>{
        if (response.data.code === 201){
          this.$message({
            type:"warning",
            message: `未查询到 ${nodeInfo.nodeName} 相关信息`
          })
        }else {
          let data= response.data.data
          this.$store.commit("setGraphDataNode",data.node)
          this.$store.commit("setGraphDataLink",data.relationship)
          searchSuccess=true
        }
      }).catch((err)=>{
        console.log(err);
      })

      if (searchSuccess){
        this.$refs.d3graph.threeInit()
      }
      this.loading=false
    })
  },
  methods: {
    // 获取图谱数据
    async getGraphData() {
      this.loading=true
      await getNodeRelationGraph().then((response) => {
        let data = response.data.data;
        this.graphData.nodes = data.node;
        this.graphData.links = data.relationship;
        this.$store.commit('setGraphDataNode', data.node);
        this.$store.commit('setGraphDataLink', data.relationship);
      }).catch((err) => {
        console.log(err);
      });
      // 4.绘制图谱
      this.loading=false
      this.$refs.d3graph.threeInit();
    }
  },
  data() {
    return {
      graphData: {
        nodes: [],
        links: []
      },
      names: ['公司名称', '工业', '产品', '国家'],
      labels: ['company', 'industry', 'product', 'Country'],
      linkTypes: ['', 'suoshuhangye', 'zhuyingchanpin', 'chanpinxiaolei', 'shangyoucailiao'],
      canvasHeight: 500,
      canvasWidth: 500,
      loading:false
    };
  }
};
</script>

<style lang='scss' scoped>
.graph-container{
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.container-main{
  height: 100%;
  width: 100%;
  overflow: hidden;
}
</style>
